<template>
  <div class="custom-flow-diagram-warp">
    <div class="custom-flow-diagram flex">
      <div class="custom-flow-diagram-example-item">
        <div>已完成</div>
        <div class="done"></div>
      </div>
      <div class="custom-flow-diagram-example-item">
        <div>进行中</div>
        <div class="current"></div>
      </div>
    </div>
    <div class="custom-flow-button">
      <div class="addBtn" @click="addFontSize">
        <i class="fks-icon-plus"></i>
      </div>
      <div class="reduceBtn" @click="reduceFontSize">
        <i class="fks-icon-minus"></i>
      </div>
    </div>
    <div class="root-node" ref="wrap" :style="{ fontSize: num + 'px' }">
      <vueDragResize
        :y="50"
        :x="initialX"
        :isActive="false"
        :w="0"
        :h="0"
        :isResizable="false"
        v-on:dragging="resize"
      >
        <branch
          :diagramMode="true"
          :flowInfo="flowInfo"
          :nodeConfig="{ nodes: nodeList }"
        ></branch>
      </vueDragResize>
    </div>
  </div>
</template>

<script>
import branch from './components/branch/index'
import { getHistoryNodes, getCustomXML } from '../../api'
import vueDragResize from 'vue-drag-resize'
export default {
  name: 'customFlowDiagram',
  props: {
    taskId: {
      type: String,
      default: ''
    },
    bizId: {
      type: String,
      default: ''
    },
    flowInfo: {
      type: Object,
      default: () => {
        return {
          userTask: [],
          currentNode: []
        }
      }
    },
    modelKey: {
      type: String,
      default: ''
    }
  },
  components: {
    branch,
    vueDragResize
  },
  data() {
    return {
      aaa: true,
      nodeList: [],
      num: 20,
      initialX: 0
    }
  },
  methods: {
    getHistoryNodes() {
      return this.flowInfos
    },
    addFontSize() {
      if (this.num >= 30) {
        return
      }
      this.num += 1
    },
    reduceFontSize() {
      if (this.num <= 20) {
        return
      }
      this.num -= 1
    },
    resize(newRect) {
      this.width = newRect.width
      this.height = newRect.height
      this.top = newRect.top
      this.left = newRect.left
    }
  },
  created() {
    getCustomXML(this.modelKey).then((res) => {
      if (res.status) {
        this.nodeList = JSON.parse(res.data.customProcessJson).nodeList
      }
    })
    getHistoryNodes({ taskId: this.taskId, bizId: this.bizId }).then((res) => {
      this.flowInfos = res.data
    })
  },
  mounted() {
    this.initialX = this.$refs.wrap.offsetWidth / 2
  }
}
</script>

<style lang="scss" scoped>
.custom-flow-diagram-warp {
  background-color: #f0f0f2;
  position: relative;
  overflow: hidden;
  .flow-editor-node.branch {
    display: block;
    padding: 50px;
  }
}
.custom-flow-diagram {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  margin: 4px 10px;
  .custom-flow-diagram-example-item {
    margin-bottom: 10px;
    margin-right: 20px;
    color: #464646;
    .done {
      width: 36px;
      height: 16px;
      border: 3px solid #65d185;
      border-radius: 4px;
    }
    .current {
      width: 36px;
      height: 16px;
      border: 3px solid #5b91fe;
      border-radius: 4px;
    }
  }
}
.custom-flow-button {
  position: absolute;
  border: none;
  top: 60px;
  left: 13px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .addBtn,
  .reduceBtn {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #5c6981;
    cursor: pointer;
    margin-bottom: 1px;
  }
  .addBtn {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
  }
  .reduceBtn {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
  }
  .fks-icon-minus,
  .fks-icon-plus {
    color: #fff;
  }
}
</style>
<style lang="scss">
@import './assets/customFlow.scss';
</style>
